﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PrintDraw.aspx.cs" Inherits="WebNormal.PrintDraw" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    

    <script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script>
     
    
    <style type="text/css">
        
       .divParent
       {
       	  width:600px;
       	  height:400px;
       	  position:absolute;
       	  border:solid 2px Black;
       	  top:130px;
       	  left:150px;
       	  
       } 
        
       .move
       {
       	  background-color:Transparent;
       	  border:solid 1px Black;
       	  position:absolute;
       	  cursor:hand;
       	  
       	   
       }
       
       #selFields
       {
       	width:110px;
       	height:400px;
       	position:absolute;
       	left:10px;
       	top:130px;
       }
       #btnAddField
       {
       	width:25px;
       	height:25px;
       	position:absolute;
       	left:120px;
       	top:250px;
       }
       .text
       {
       	  width:80px;
       }
    
    </style>
<%--    <object id="PrintBill" classid="APrintBill.Class1" codebase="http://www.baidu.com">
    </object>--%>
    
    <script type="text/javascript">


        
        var cursorX, cursorY; //, divX, divY
        var selectedObj = new Array();
        var selectedObjPos = new Array();
        var isDown = false;
        var dbc = null;
        var ArrFields = new Array()

        $(function() {
            window.divParent = document.getElementById("divParent");
            divParent.Bottom = getHeight(divParent);
            divParent.Right = getWidth(divParent);
            divParent.Left = getLeft(divParent);
            divParent.Top = getTop(divParent);

            //createDiv("中国", "name", "宋体", 14, 50, 100);

            loadFields();
        })

        //鼠标按下，它与 onclick 事件有区别，
        //鼠标按下时就会触发 mousedown, 按下弹起才会触发 onclick 事件。
        function fn_onmousedown(obj) {
            isDown = true;
            recordLocation();
            
            //记录当前光标的位置
            cursorY = event.y;
            cursorX = event.x;
        }

        function recordLocation() {
            //记录所有选中框的坐标和大小，大小是为了移动时判断是否超出父容器时使用的。
            selectedObjPos = new Array();
            for (var i = 0; i < selectedObj.length; i++) {
                selectedObjPos[i] = new Object();
                selectedObjPos[i].x = getLeft(selectedObj[i]);
                selectedObjPos[i].y = getTop(selectedObj[i]);
                selectedObjPos[i].w = getWidth(selectedObj[i]);
                selectedObjPos[i].h = getHeight(selectedObj[i]);
            }        
        }
        
        

        //鼠标弹起，释放拖动动作。
        function fn_onmouseup(obj) {
            isDown = false;
        }

        //设定选中的框，可以是一个集合        
        function setSelectedObj(obj) {

            //恢复初始颜色。
            if (obj != selectedObj) {
                $(".move").each(function(i) {
                    this.style.border = "solid 1px Black";
                    this.style.zIndex = 0;
                });
            }

            if (obj.className != "move") {
                //取消选择
                selectedObj = new Array();
            }
            else {
                if (event.ctrlKey) { //按下 ctrl,即表示多选。
                    if (!isSelected(obj)) {
                        //添加
                        selectedObj[selectedObj.length] = obj;
                    }
                    else {
                        //移出当前对象
                    }
                }
                else { //选中单个对象
                    if (!isSelected(obj)) {
                        selectedObj = new Array();
                        selectedObj[0] = obj;
                    }
                }
                displayDivProperty();
            }

            //为选中对象加上颜色边框。
            for (var i = 0; i < selectedObj.length; i++) {
                selectedObj[i].style.border = "solid 1px Blue";
                selectedObj[i].style.zIndex = 1000;
            }

            //选中对象个数，调试用。
            $("#txtCount")[0].innerText= selectedObj.length;
                
            
            event.cancelBubble = true; //中断事件链，避免底层对象再响应此事件。
        }
         
        //鼠标移动，即拖动对象。
        function fn_onmousemove(obj) {
            if (!isDown) {
                return;
            }
            var newy = getTop(obj);
            var newx = getLeft(obj);

            var offsetY = (event.y - cursorY);
            var offsetX = (event.x - cursorX);

            if (isLimitedByParent(offsetX, offsetY)) {
                return;
            }
            for (var i = 0; i < selectedObj.length; i++) {
                var obj = selectedObj[i];
                obj.style.top = selectedObjPos[i].y + offsetY;
                obj.style.left = selectedObjPos[i].x + offsetX;

                if (i == 0) {
                    document.getElementById("txtX").innerText = getLeft(obj);
                    document.getElementById("txtY").innerText = getTop(obj);
                }
                
            }

        }

        //当移动对象是判断是否超出父容器。
        function isLimitedByParent(offsetX, offsetY) {
            
            var islimited = false;
            //得到父容的外围限制。
            //var parentBottom = getHeight(divParent);
            //var parentRight = getWidth(divParent);

            //父容器限制
            for (var i = 0; i < selectedObj.length; i++) {
                var obj = selectedObj[i];
                if (selectedObjPos[i].y + offsetY < 0) {
                    islimited = true;
                    break;
                }
                if (selectedObjPos[i].y + offsetY + selectedObjPos[i].h > divParent.Bottom - 2) {
                    islimited = true;
                    break;
                }
                if (selectedObjPos[i].x + offsetX < 0) {
                    islimited = true;
                    break;
                }
                if (selectedObjPos[i].x + offsetX + selectedObjPos[i].w > divParent.Right - 2) {
                    islimited = true;
                    break;
                }
            }
            return islimited;
        }

        //按下一个 DIV 时触发。
        //单独写一个方法是因为需要确保它的执行顺序，一定要先选中再移动。
        function moveDiv_click(obj) {
            setSelectedObj(obj);
            fn_onmousedown(obj);
        }
        
        //创建对象
        function createDiv(dataObj) {


            //text, fieldName, family, size, x, y
            var div1 = document.createElement("span");
            div1.className = "move";
            
            div1.onmousedown = function() { moveDiv_click(this) }; //onclick 要待到鼠标弹起才会触发。
            div1.onmouseup = function() { fn_onmouseup(this) };
            div1.onmouseout = function() { fn_onmouseup(this) }
            div1.onmousemove = function() { fn_onmousemove(this) };

            div1.onselectstart = function() { return false; };  //使得 DIV  里面的文字在双击时也不会被选中,但从外面拉一个框也还是能选中，有待改进。

            //div1.style.width = 50; //document.getElementById("txtWidth").value;
            //div1.style.height = 30; //document.getElementById("txtHeight").value;

            div1.text = dataObj.text;
            div1.fieldName = dataObj.fieldName;
            div1.style.left = dataObj.posx;
            div1.style.top = dataObj.posy;
            div1.family = dataObj.fontfamily;
            div1.size = dataObj.fontsize;
            div1.align = dataObj.posalign;
            div1.islock = dataObj.islock;
            div1.dataObj=dataObj;
            RenderDiv(div1);
            
            document.getElementById("divParent").appendChild(div1);
            //class="move" onmousedown = "fn_onmousedown(this)" onmouseup ="fn_onmouseup(this)" onmousemove="fn_onmousemove(this)">中国</div>
        }
        
        //根据对象的属性呈出它的外观。修改属性以后需要调用。
        function RenderDiv(div1) {
            div1.style.fontFamily = div1.family;
            div1.style.fontSize = div1.size;
            div1.innerText = div1.text;
        }
        
      </script>
      <script language="javascript"> 
        //创建命令
        function btnCreate_click() {
            var text = document.getElementById("txtText").value;
            var family= $("#selFont").val();
            var size=$("#txtSize").val();
            //createDiv(text,"name",family,size,100,100);
        }

        //支持方向键移动
        function body_onkeydown() {
            if (selectedObj == null)
                return;
            if (event.keyCode > 40 || event.keyCode < 37)
                return;

            //记录位置
            recordLocation();
            
            var offsetX = 0;
            var offsetY = 0;
            switch (event.keyCode) {
                case 38: //上
                    offsetY = -1;
                    break;
                case 39: //右
                    offsetX = 1;
                    break;
                case 40: //下
                    offsetY = 1;
                    break;
                case 37: //左
                    offsetX = -1;
                    break;
            }
            //外围限制判断
            if (isLimitedByParent(offsetX, offsetY)) {
                return;
            }


            //移动对象
            for (var i = 0; i < selectedObj.length; i++) {
                var obj = selectedObj[i];

                divY = getTop(obj);
                divX = getLeft(obj);
                obj.style.left = divX + offsetX;
                obj.style.top = divY + offsetY;
            }
        }
        
        //判断对象是否被选中。
        function isSelected(obj) {
            for (var i = 0; i < selectedObj.length; i++) {
                if (obj == selectedObj[i])
                    return true;
            }
            return false;
        }
        //左对齐
        function btnLeftAlign_click() {
            for (var i = 0; i < selectedObj.length-1; i++) {
                selectedObj[i + 1].style.left = selectedObj[i].style.left;
            }
        }
        //右对齐
        function btnRightAlign_click() {
            if (selectedObj.length > 0) {
                divX = getLeft(selectedObj[0]);
                divW = getWidth(selectedObj[0]);
                var right = divX + divW;      
            }
        
            for (var i = 0; i < selectedObj.length - 1; i++) {
                divW2 = getWidth(selectedObj[i + 1]);
                selectedObj[i + 1].style.left = (right - divW2);
            }
        }
        //顶端对齐
        function TopAlign() {
            for (var i = 0; i < selectedObj.length - 1; i++) {
                selectedObj[i + 1].style.top = selectedObj[i].style.top;
            }
        }
        //底部对齐
        function BottomAlign() {
            if (selectedObj.length > 0) {
                divY = getTop(selectedObj[0]);
                divH = getHeight(selectedObj[0]);
                var bottom = divY + divH;
            }

            for (var i = 0; i < selectedObj.length - 1; i++) {
                divH2 = getHeight(selectedObj[i + 1]);
                selectedObj[i + 1].style.top = (bottom - divH2);
            }
        }
        //水平对齐
        function sameDistanceH() {
            orderByLeft();

            var distance = 0;
            if (selectedObj.length > 2) {
                var left1 = getLeft(selectedObj[0]);
                var left2 = getLeft(selectedObj[1]);
                var width1 = getWidth(selectedObj[0]);
                distance = left2 - left1 - width1;
            }

            for (var i = 2; i < selectedObj.length; i++) {
                selectedObj[i].style.left = getLeft(selectedObj[i - 1]) + getWidth(selectedObj[i - 1]) + distance;
            }
        }
        
        //垂直对齐        
        function sameDistanceV() {
            orderByTop();
            var distance = 0;
            if (selectedObj.length > 2) {
                var top1 = getTop(selectedObj[0]);
                var top2 = getTop(selectedObj[1]);
                var height1 = getHeight(selectedObj[0]);
                distance = top2 - top1 - height1;
            }
            
            for (var i = 2; i < selectedObj.length; i++) {
                selectedObj[i].style.top = getTop(selectedObj[i - 1]) + getHeight(selectedObj[i - 1]) + distance;
            }
        }
        //删除选中的元素
        function DeleteElement() {
            if (!confirm("确认删除吗？")) {
                return;
            }
            
            //var divParent = document.getElementById("divParent");
            for (var i = 0; i < selectedObj.length; i++) {
                var dataObj = selectedObj[i].dataObj;
                dataObj.selected = false;
                dataObj.created = false;
                SyncProperty(selectedObj[i], dataObj);
                divParent.removeChild(selectedObj[i]);
            }

            FefreshSelFieldsByArray();
        }
        //修改选中元素的属性
        function AlterProperty() {
            var text = document.getElementById("txtText").value;
            var family= $("#selFont").val();
            var size=$("#txtSize").val();

            for (var i = 0; i < selectedObj.length; i++) {
                if (family != "") {
                    selectedObj[i].family = family;
                }
                if (size != "") {
                    selectedObj[i].size = size;
                }

                  //文本不需要更改
//                if (selectedObj.length == 1) {
//                    selectedObj[i].text = text;
//                }
                RenderDiv(selectedObj[i]);
            }
        }
        //同步Div 的属性到数据对象。
        function SyncProperty(div1, obj) {
            obj.posx = getLeft(div1);
            obj.posy = getTop(div1);
            obj.fontfamily = div1.family;
            obj.fontsize = div1.size;
            obj.posalign = div1.align;
            obj.islock = div1.islock;            
        }


        //按对象的 Top 值排序，在垂直对齐之前需要调用
        function orderByTop() {
            for (var i = 0; i < selectedObj.length - 1; i++) {
                for (var k = 0; k < selectedObj.length - i -1; k++) {
                    var top1 = getTop(selectedObj[k]);
                    var top2 = getTop(selectedObj[k + 1]);
                    if (top1 > top2) {
                        var obj = selectedObj[k];
                        selectedObj[k] = selectedObj[k + 1];
                        selectedObj[k + 1] = obj;
                    }
                }
            }
        }
        //按对象的 left 值排序，在水平对齐时需要调用
        function orderByLeft() {
            for (var i = 0; i < selectedObj.length - 1; i++) {
                for (var k = 0; k < selectedObj.length - i - 1; k++) {
                    var top1 = getLeft(selectedObj[k]);
                    var top2 = getLeft(selectedObj[k + 1]);
                    if (top1 > top2) {
                        var obj = selectedObj[k];
                        selectedObj[k] = selectedObj[k + 1];
                        selectedObj[k + 1] = obj;
                    }
                }
            }
        }
                
        function getTop(obj) {
            return obj.offsetTop-2;
        }
        function getLeft(obj) {
            return obj.offsetLeft-2;
        }
        function getWidth(obj) {
            return obj.clientWidth;
        }
        function getHeight(obj) {
            return obj.clientHeight;
        }
        function getRight(obj) {
            return obj.offsetLeft + obj.clientWidth;
        }
        function getBottom(obj) {
            return obj.offsetTop + obj.clientHeight;
        }
        
    </script>
    
    <script type="text/javascript">

        function btnSave_click() {
            //公司和用户在页面装载的时候获取保存取隐藏域。提交时再传回
            //或者试下 currentContext.response.session("")

            var data = "";  //每个字段用 "|" 分开，中间的属性用","号分开，格式为： 字段名,描述,x,y,align,字体,字号
            var compid = $("#hidCompid").val();
            var empid = $("#hidEmpid").val();


            //            ArrFields[0].text = "单号";
            //            ArrFields[0].fieldName = "hid";
            //            ArrFields[0].posx = 100;
            //            ArrFields[0].posy = 100;
            //            ArrFields[0].family = "宋体"
            //            ArrFields[0].size = 20;
            //            ArrFields[0].align = "left";
            //            ArrFields[0].islock = false;
            //            ArrFields[0].selected = false;
            //            ArrFields[0].created = false;
            $(".move").each(function(i) {
                var x = getLeft(this);
                var y = getTop(this);
                data += "|" + this.fieldName + ";" + this.text + ";" + x + ";" + y + ";" + this.align + ";" + this.family + ";" + this.size + ";1";
            })

            var selFields = document.getElementById("selFields")
            for (var i = 0; i < selFields.length; i++) {
                var dataObj = selFields.options[i].dataObj;
                
                data += "|" + dataObj.fieldName + ";" + dataObj.text + ";" + dataObj.posx + ";" + dataObj.posy + ";" + dataObj.posalign + ";" + dataObj.posfamily + ";" + dataObj.fontsize + ";0";
            }

            data = data.substring(1);

            data = "{'compid':'" + compid + "','empid':'" + empid + "','data':'" + data + "'}";
            var url = "rcm010101.aspx/Save";
            getDateByJQAjax(url, data, successFun, failFun);

        }
        function successFun(data) {
            alert("保存成功!");
        }
        function failFun(data) {
            debugger;
            data = eval(data);
            alert("保存失败!" + data.responseText)
            
        }
        
        
        
    
    </script>
    
    <script type="text/javascript">
        function loadFields() {
            PageMethods.queryShipSetting(queryShipSetting_success, queryShipSetting_error);
         
        }
        function queryShipSetting_error(result) {
            debugger;
        }
        function queryShipSetting_success(result) {
            debugger;
            var rows = result.rows;
            for (var i = 0; i < rows.length; i++) {
                
                ArrFields[i] = new Object()
                ArrFields[i].text = rows[i]["fielddesc"];
                ArrFields[i].fieldName = rows[i]["fieldname"];
                ArrFields[i].posx = rows[i]["posx"];
                ArrFields[i].posy = rows[i]["posy"];
                ArrFields[i].fontfamily = rows[i]["fontfamily"];
                ArrFields[i].fontsize = rows[i]["fontsize"];
                ArrFields[i].posalign = rows[i]["posalign"];
                ArrFields[i].islock = rows[i]["islock"];
                ArrFields[i].selected = rows[i]["selected"];
                ArrFields[i].created = false;
            }

            FefreshSelFieldsByArray();
        }

        //通过 ArrFields 数组去刷新 SelFields
        function FefreshSelFieldsByArray() {
            var selFields = document.getElementById("selFields");

            for (var k = selFields.options.length - 1; k >= 0; k--) {
                selFields.remove(k);
            }


                selFields.size = ArrFields.length;
            selFields.multiple = true;

            for (var i = 0; i < ArrFields.length; i++) {
                //未选加入 selcte 框，
                if (ArrFields[i].selected!="1") {
                
                    var oOption = document.createElement("OPTION");
                    selFields.options.add(oOption);
                    oOption.innerText = ArrFields[i].text;
                    oOption.value = ArrFields[i].fieldName;
                    oOption.dataObj = ArrFields[i];

                }
                //已选直接创建到设计区域
                else if(!ArrFields[i].created){
                    var dataObj = ArrFields[i];
                    //createDiv(dataObj.text, dataObj.fieldName, dataObj.family, dataObj.size, dataObj.posx, dataObj.posy);
                    createDiv(dataObj);
                    dataObj.created = true;
                }
            }
        }
        
        
        function AddField() {
            var selFields = document.getElementById("selFields");

            for (var i = 0; i < selFields.length; i++) {
                if (selFields.options[i].selected) {
                    var dataObj = selFields.options[i].dataObj;
                    createDiv(dataObj);
                    //createDiv(dataObj.text, dataObj.fieldName, dataObj.family, dataObj.size, dataObj.posx, dataObj.posy);
                    dataObj.selected = true;
                    dataObj.created = true;
                }
            }
            FefreshSelFieldsByArray();
        }

        function displayDivProperty() {

            var size = "";
            var family = "";
            var issame = true;
            if (selectedObj.length <= 0)
                return;
                
            for (var i = 0; i < selectedObj.length; i++) {
                if (selectedObj[i].family != family && family != "") {
                    issame = false;
                    break;
                }
                if (selectedObj[i].size != size && size != "") {
                    issame = false;
                    break;
                }

                family = selectedObj[i].family;
                size = selectedObj[i].size;
            }

            if (issame) {
                $("#selFont").val(family);
                document.getElementById("txtSize").value = size;
            }
            else {
                $("#selFont").val("");
                document.getElementById("txtSize").value = "";                
            }
            
            
        }
    
    
    </script>
    
    
    
</head>
<body onkeydown="body_onkeydown()" >
    <form id="form1" runat="server" >

    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
    </asp:ScriptManager>
    
    <input type="hidden" runat="server" id="hidCompid" />
    <input type="hidden" runat="server" id="hidEmpid" />
    
    <input type="button" id="btnLeftAlign" value="左对齐" onclick="btnLeftAlign_click()" />
    <input type="button" id="btnRightAlign" value="右对齐" onclick="btnRightAlign_click()" />

    <input type="button" id="btnTopAlign" value="顶端对齐" onclick="TopAlign()" />
    <input type="button" id="btnBottomAlign" value="底部对齐" onclick="BottomAlign()" />
        
    <input type="button" id="btnSameDistanceV" value="垂直对齐" onclick="sameDistanceV()" />
    <input type="button" id="btnSameDistanceH" value="水平对齐" onclick="sameDistanceH()" />
    

    

    
    <br />
    <br />
    
    字体:<select id="selFont">
    <option value="宋体">宋体</option>
    <option value="楷体">楷体</option>
    <option value="隶书">隶书</option>
    <option value="幼圆">幼圆</option>
    </select>
    大小:<input id="txtSize" type="text"  class="text"  />
    Text:<input type="text" id="txtText"  class="text"/><br />
    <input type="button" id="btnCreate" onclick="btnCreate_click()" value="创建" />
    <input type="button" id="btnDelete" value="删除" onclick="DeleteElement()" />
    <input type="button" id="btnAlter" value="修改属性" onclick="AlterProperty()" />
    <input type="button" id="btnSave" value="保存设置" onclick="btnSave_click()" />
<%--    <asp:FileUpload ID="FileUpload1" runat="server" Width="242px"  />
    <input type="button" id="btnUploadImage" value="上传" />--%>

    
    <br />
    
    
    Count:<span id="txtCount" style="width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>   
    X:<span id="txtX" style="width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>           
    Y:<span id="txtY" style="width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>           
<%-- <input type="text" id="Text1"  class="text"  />
<input type="text" id="Text2"  class="text" />
    <input type="text" id="Text3" class="text" /><br />
--%>   
   
   <input id="btnAddField" type="button" onclick="AddField();" />
   
    <select id="selFields">
    </select>
   
   
    <div class="divParent" id="divParent" onmousedown="setSelectedObj(this)" >
    </div>
    </form>
</body>
</html>
